<html>

<head>
  <title>海里捞漂流瓶</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="{{ url_for('static',filename='index/js/jquery.1.min.js') }}"></script>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='index/css/style.css') }}" />
  <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='index/css/bottle.css') }}" />
</head>

<body>
  <div class="beach">
    <div class="sun"></div>
    <div class="crab"></div>
    <div class="land"></div>
    <div class="left"></div>
    <img src="{{ url_for('static',filename='index/image/bottle/salvage.png') }}" class="salvage" />
    <div class="water"></div>
    <div class="sea"></div>
    <div class="prize">
      <img id="prize" src="{{ url_for('static',filename='index/image/bottle/salvage_2.png') }}" />
    </div>
    <div class="tools">
      <a href="javascript:void(0)" class="net"></a>
      <a href="javascript:void(0)" class="get"></a>
      <a href="javascript:void(0)" class="my"></a>
    </div>
    <p class="info">
        &copy;2015-2020 By小康 海底捞漂流瓶 V0.9π
        </br>
        供学习测试用,您的数据随时可能丢失!
        </br>
        本漂流瓶仅实现主体流程逻辑.
        </br>
        xiaokang@xilemao.cn
    </p>
    <div class="window" style="display: none">
{#    <div class="window">#}
      <button class="close">X</button>
      <div class="cont">
        <div class="getbox" style="display: none">
          <h3>
            捞捞看
          </h3>
          <div class="desc">
            捞到一条鲨鱼
          </div>
          <p class="user" style="display: none">
            张小康 2023-09-12 12:21:12 来自:192.168.1.1
          </p>
          <hr>
          <p class="button">
            <button class="resea" style="display: none">丢回海里</button>
            <button class="reget">再捞一个</button>
            <button class="remes" style="display: none" onclick="addMes(event,event)">回应一下</button>
          </p>

        </div>

        <div class="setbox" style="display: none">
          <h3>
            扔一个
          </h3>
          <div class="desc">
            <textarea class="setinfo" name="content" cols="30" rows="10" placeholder="请输入留言内容"></textarea>
          </div>
          <hr>
          <p class="button">
            <button class="setsea">丢到海里</button>
          </p>
        </div>

        <div class="setmes" style="display: none">
          <h3>
            发留言
          </h3>
          <div class="desc">
            <textarea class="setinfo mesinfo" name="content" cols="30" rows="10" placeholder="请输入留言内容"></textarea>
          </div>
          <hr>
          <p class="button">
            <button onclick="setMes()">回应Ta</button>
          </p>
        </div>

        <div class="tips" style="display: none">
          <h3 class="text">
            成功丢到海里 .v. </h3>
              <p class="button">
                <button class="reset">再丢一个</button>
              </p>
        </div>

        <div class="list" style="display: none">
            <h3>我的瓶子</h3>
            <ul class="bottleList">
                <li>
                    <span class="mes">内容</span>
                    <span class="users">用户</span>
                    <span class="type">类型</span>
                    <span class="time center">时间</span>
                    <span class="menu right">操作</span>
                </li>
            </ul>
            <p class="mesitem">
                <button class="mymes" onclick="mesList()">我的消息</button>
            </p>
        </div>

        <div class="message list" style="display: none">
            <h3>我的消息</h3>
            <ul class="messageList">
                <li>
                    <span class="mes">内容</span>
                    <span class="users">用户</span>
                    <span class="type">类型</span>
                    <span class="time center">时间</span>
                    <span class="menu right">操作</span>
                </li>
            </ul>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="{{ url_for('static',filename='index/js/bottle.js') }}"></script>








<!-- 点到为止，再看就是垃圾代码！ -->









  <script>
    var bottleid = 0;
    var couser = '';
    var rebottle = '';

    $(function () {
      $(".close").click(function () {
        $(".window").hide(300);
        $(".tools").removeClass('hide');
      });
      {% if 'username' in session %}
      $(".net").click(reset);
      $(".get").click(setBottle);
      $(".my").click(getList);
      {% else %}
      $(".net").click(reset);
      $(".get").click(reset);
      $(".my").click(reset);
      function reset() {
        alert('需要先登录才能使用哦！')
        location.href = "/login";
      }
      {% endif %}
    });

    $(function () {
      $(".resea").click(function () {
        {#{ #丢回海里# }#}
          var data = {
              username: '{{ session['username'] }}',
              bottleid: bottleid
            };
          $.ajax({
          url: "/rebottle",
          type: "POST",
          data: JSON.stringify(data),
          contentType: "application/json",
          success: function (response) {
            // 请求成功处理逻辑
            console.log(response);
            $(".setbox").hide(200);
            $(".getbox").hide(200);
            $(".tips .text").text(response.success);
            $(".tips").show(200);
            $('.reset').hide();
            $('.cont .list').hide();
          },
          error: function (xhr, status, error) {
            // 请求失败处理逻辑
            console.error(error);
          }
        });
      });

      {#{ #再捞一个# }#}
      $(".reget").click(function () {
        $(".window").hide(300);
        {#{ #重置动画# }#}
        reset()
      });

      // 获取漂流瓶按钮点击事件
    });

    {#开捞#}
    function getBottle(is) {
      console.log(is)
      $(".tips").hide(300);
      $(".setbox").hide(300);
      $('.cont .list').hide();
      $(".window").show(300);
      $(".tools").addClass('hide');
      $(".getbox").show(200);
      {#$(".getbox .user").hide();#}
      switch (is) {
        case 1:
          $('.getbox .desc').text('捞到了一条黑鱼！');
          break;
        case 2:
          $('.getbox .desc').text('捞到了一只螃蟹！');
          break;
        case 3:
          $('.getbox .desc').text('捞到了一个海星！');
          break;
        case 4:
          $('.getbox .desc').text('捞到了打击透镜！');
          break;
        case 5:
          $('.getbox .desc').text('捞到了一条大鲨鱼！');
          break;
        case 6:
          $('.getbox .desc').text('捞到了海绵宝宝！');
          break;
        default:
          {#$('.getbox .desc').text('捞到了漂流瓶！');#}
          {#$(".getbox .user").show();#}

          break;
      }
    }

    {#上岸#}
    function showPrize() {
      $salveage.css({ "-webkit-transform": "rotate(0deg)" });
      $(".sea").css({
        "z-index": -1
      });
      $(".water").css({
        "z-index": 3,
        "opacity": 1,
        "top": "150px"
      });
      $(".water").animate({
        top: "220px",
        opacity: 0
      }, 800, function () { });

      var type = getPrize();
      $(".prize").css({
        "z-index": 1,
        "display": "block"
      });

      $(".sea").css({
        "z-index": 1
      });
      isAction = false;

      // 定义要执行的函数
      function showget() {
        console.log('waiting look 1s');
        getBottle(type)
      }
      setTimeout(showget, 500);

      {#是否捞取#}
      if(type=='1'||type=='2'||type=='3'||type=='4'||type=='5'||type=='6'){
          console.log('运气真好,什么也没捞到~')
          $('.resea').hide();
          $('.remes').hide();
          $('.user').hide();
          return false;
      }
      var username = '{{ session['username'] }}';
      var userid = '{{ session['userid'] }}';

      $.ajax({
        type: 'POST',
        url: '/getbottle',
        dataType: 'json',
        data: JSON.stringify({ 'username': username, 'userid': userid }),
        contentType: 'application/json;charset=UTF-8',
        success: function (response) {
          if (response.state == 200) {
            console.log(response);
            bottleid = response.bottleid;
            $('.remes').attr('data-id',bottleid);
            $('.remes').attr('data-user',response.setuser);
            $('.getbox .desc').text(response.content);
            $(".getbox .user").show();
            $(".getbox .user").text(response.settime);
            $('.resea').show();
            $('.remes').show();
            $('.cont .list').hide();
            {#$(".getbox .user").text(response.setuser + response.settime +'来自:'+response.setip );#}
          } else {
            $('.getbox .desc').text('捞的人太多了,水都浑了,一会再来试试吧!');
            $('.getbox .user').hide();
            $('.resea').hide();
            $('.remes').hide();
          }
        },
        error: function (xhr, status, error) {
          console.log(error);
          $('.getbox .user').hide();
          $('.getbox .desc').text('捞的人太多了,水都浑了,一会再来试试吧!');
        }
      });

    }

    {#{ #丢漂流瓶# }#}
    function setBottle() {
      $(".setbox").show(200);
      $(".window").show(200);
      $(".getbox").hide(300);
      $(".tools").addClass('hide');
      $('.cont .list').hide();
      $('.tips').hide();
      $('.setmes').hide();
    }

    function closeButton(){
        console.log('close fun');
        $(".window").hide(300);
        $(".tools").removeClass('hide');
        setBottle();
    }

    $(function () {
        {#再投一个# }#}
      $(".reset").click(function () {
        $(".setbox").show(200);
        $(".tips .text").text('等待海浪...');
        $(".tips").hide(200);
        $(".setinfo").val('');
        $(".list").hide();
      });
      {#{ #投漂流瓶# }#}
      $(".setsea").click(function () {
        var username = '{{ session['username'] }}';
        var userid = '{{ session['userid'] }}';
        var content = $(".setinfo").val();

        if (username.length < 1 || userid.length < 1 || content.length < 1) {
          alert("瓶子未封闭完整");
          return;
        }

        var data = {
          username: username,
          userid: userid,
          content: content
        };

        console.log(data);

        $.ajax({
          url: "/setbottle",
          type: "POST",
          data: JSON.stringify(data),
          contentType: "application/json",
          success: function (response) {
            // 请求成功处理逻辑
            console.log(response);
            $(".setbox").hide(200);
            $(".tips .text").text(response.success);
            $(".tips").show(200);
          },
          error: function (xhr, status, error) {
            // 请求失败处理逻辑
            console.error(error);
          }
        });
      });
      {#getlist#}
    });

    {#我的瓶子#}
    function getList(){
      var username = '{{ session['username'] }}';
      var userid = '{{ session['userid'] }}';

      $(".setbox").hide();
      $(".window").show(200);
      $(".getbox").hide();
      $(".tools").addClass('hide');
      $('.cont .list').show(200);
      $('.message').hide();
      $('.tips').hide();
      $('.setmes').hide();

      $.ajax({
        type: 'POST',
        url: '/getlist',
        dataType: 'json',
        data: JSON.stringify({ 'username': username, 'userid': userid }),
        contentType: 'application/json;charset=UTF-8',
        success: function (response) {
          if (response.state == 200) {
              console.log(response);

              // 获取 ul 列表元素
              var list = $('.bottleList');
              list.children().slice(1).remove();
              // 遍历查询到的漂流瓶
              $.each(response.bottles, function(index, bottle){
                // 构建 li 元素的 HTML 内容
                var html = '<li>';
                html += '<span class="mes">' + bottle['content'] + '</span>';
                html += '<span class="users">' + bottle['setuser'] + '</span>';
                html += '<span class="type">' + bottle['type'] + '</span>';
                html += '<span class="time">' + bottle['settime'] + '</span>';
                if(bottle['type']!='我捞的'){
                    html += '<span class="menu right"><button onclick="closeButton()" class="op8">再扔</button></span>';
                }else{
                    console.log(bottle['id']);
                    html += '<span class="menu right"><button onclick="addMes(' + bottle['id'] + ',' + bottle['setuser'] + ')">回应</button></span>';
                }

                html += '</li>';
                // 将 li 元素插入到 ul 列表
                list.append(html);
              });
            } else {
              $('.getbox .desc').text('捞的人太多了,水都浑了,一会再来试试吧!');
              $('.getbox .user').hide();
            }
        },
        error: function (xhr, status, error) {
          console.log(error);
          $('.getbox .user').hide();
          $('.getbox .desc').text('捞的人太多了,水都浑了,一会再来试试吧!');
        }
      });
    }

    function mesList(){
      var username = '{{ session['username'] }}';
      var userid = '{{ session['userid'] }}';

      $(".setbox").hide();
      $(".window").show(200);
      $(".getbox").hide();
      $(".list").hide();
      $(".meslist").show(200);
      $(".tools").addClass('hide');
      $('.message').show();

      $.ajax({
        type: 'POST',
        url: '/meslist',
        dataType: 'json',
        data: JSON.stringify({ 'username': username, 'userid': userid }),
        contentType: 'application/json;charset=UTF-8',
        success: function (response) {
          if (response.state == 200) {
              console.log(response);

              // 获取 ul 列表元素
              var list = $('.messageList');
              list.children().slice(1).remove();
              // 遍历查询到的漂流瓶
              $.each(response.message, function(index, message){
                // 构建 li 元素的 HTML 内容
                var html = '<li>';
                html += '<span class="mes">' + message['content'] + '</span>';
                html += '<span class="users">' + message['setuser'] + '</span>';
                html += '<span class="type">' + message['type'] + '</span>';
                html += '<span class="time">' + message['settime'] + '</span>';
                if (message['type'] != '发送') {
                    html += '<span class="right menu"><button onclick="addMes(' + message['id'] + ',' + message['setuser'] + ')">回应Ta</button></span>';
                }else{
                    html += '<span class="right menu"><button class="op8">无</button></span>';
                }


                html += '</li>';
                // 将 li 元素插入到 ul 列表
                list.append(html);
              });
            } else {
              console.log('没有消息');
              $('.tips .text').text('捞的人太多了,水都浑了,一会再来试试吧!');
              $('.getbox .user').hide();
            }
        },
        error: function (xhr, status, error) {
          console.log(error);
          $('.getbox .user').hide();
          $('.getbox .desc').text('捞的人太多了,水都浑了,一会再来试试吧!');
        }
      });
    }

    function addMes(bottleid,couser) {
        // 如果传入的参数不是数字类型，那么我们假设它是事件对象
      if (typeof bottleid !== 'number') {
        // 获取事件对象中存储的数据
        bottleid = $(bottleid.target).attr('data-id');
        couser = $(couser.target).attr('data-user');
        // 其他操作
      }
      console.log(bottleid,couser);
      $('.setmes').show();
      $(".list").hide(200);
      $(".setbox").hide(200);
      $(".getbox").hide(200);
      $('.tips').hide();
      {#setMes(bottleid,couser);#}
      this.rebottle = bottleid;
      this.couser = couser;
    }

    function setMes(){
        console.log(this.couser,this.rebottle);
        var username = '{{ session['username'] }}';
        var userid = '{{ session['userid'] }}';
        var content = $(".mesinfo").val();

        if (username.length < 1 || userid.length < 1 || content.length < 1) {
          alert("消息不完整~");
          return;
        }

        var data = {
          couser:this.couser,
          reuser: username,
          reid: this.rebottle,
          recontent: content
        };

        console.log(data);

        $.ajax({
          url: "/addmes",
          type: "POST",
          data: JSON.stringify(data),
          contentType: "application/json",
          success: function (response) {
            // 请求成功处理逻辑
            console.log(response);
            $(".setbox").hide(200);
            $(".tips .text").text(response.success);
            $(".tips").show(200);
            $(".reset").hide();
            $('.setmes').hide();
          },
          error: function (xhr, status, error) {
            // 请求失败处理逻辑
            console.error(error);
          }
        });
    }
  </script>
</body>

</html>